import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

import '../../route/route_utils.dart';
import '../../route/routes.dart';

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;

    final sections = [
      SettingSection(
        header: l10n.settingsAccount,
        items: [
          SettingItem(
            title: l10n.settingsProfile,
            subtitle: l10n.settingsViewAndEdit,
            icon: Icons.person,
            onTap: () {
              RouteUtils.pushForNamed(context, RoutePath.profile);
            },
          ),
          SettingItem(
            title: l10n.settingsSecurity,
            subtitle: l10n.settingsPasswordAndVerification,
            icon: Icons.lock,
            onTap: () {
              RouteUtils.pushForNamed(context, RoutePath.securitySettings);
            },
          ),
        ],
      ),
      SettingSection(
        header: l10n.settingsAppearance,
        items: [
          SettingItem(
            title: l10n.settingsThemeMode,
            subtitle: l10n.settingsLightDark,
            icon: Icons.brightness_6,
            onTap: () {
              RouteUtils.pushForNamed(context, RoutePath.themeSettings);
            },
          ),
          SettingItem(
            title: l10n.settingsLanguage,
            subtitle: l10n.settingsLanguagesZhEn,
            icon: Icons.language,
            onTap: () {
              RouteUtils.pushForNamed(context, RoutePath.languageSettings);
            },
          ),
        ],
      ),
      SettingSection(
        header: l10n.settingsPrivacy,
        items: [
          SettingItem(
            title: l10n.settingsPrivacyPolicy,
            icon: Icons.privacy_tip,
            onTap: () {
              RouteUtils.pushForNamed(context, RoutePath.privacyPolicy);
            },
          ),
        ],
      ),
    ];

    return Scaffold(
      appBar: AppBar(title: Text(l10n.settingsSettings)),
      body: ListView.builder(
        itemCount: sections.length,
        itemBuilder: (context, index) {
          final section = sections[index];
          return _buildSection(context, section);
        },
      ),
    );
  }

  Widget _buildSection(BuildContext context, SettingSection section) {
    final theme = Theme.of(context);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (section.header.isNotEmpty)
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
            child: Text(
              section.header,
              style: theme.textTheme.titleSmall!
                  .copyWith(color: theme.colorScheme.primary),
            ),
          ),
        ...section.items.map((item) => ListTile(
              leading: Icon(item.icon, color: theme.colorScheme.primary),
              title: Text(item.title),
              subtitle: item.subtitle != null && item.subtitle!.isNotEmpty
                  ? Text(item.subtitle!)
                  : null,
              trailing: const Icon(Icons.chevron_right),
              onTap: item.onTap,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12)),
            )),
        const Divider(height: 1),
      ],
    );
  }
}

class SettingSection {
  final String header;
  final List<SettingItem> items;

  SettingSection({required this.header, required this.items});
}

class SettingItem {
  final String title;
  final String? subtitle;
  final IconData icon;
  final VoidCallback onTap;

  SettingItem({
    required this.title,
    this.subtitle,
    required this.icon,
    required this.onTap,
  });
}
